<template>
  <div id="minecriteria">
    <!-- 返回导航条 -->
    <mt-header fixed>
      <mt-button icon="back" @click="goBackTo()" slot="left">返回</mt-button>
    </mt-header>

    <!-- 发布过的文章 -->
    <div class="passage_name">我的评论:</div>
  
    <!-- 评论内容 -->
    <div v-for="it in list" class="media-1-1">
      <mt-header :title="it.use_critiques" id="cell_2">
        <mt-button slot="left" @click="deleteDetail(it._id)">删除</mt-button>
        <mt-button slot="right" @click="showDetail(it.detail_ID)">详细</mt-button>
      </mt-header>
  
      <!--时间-->
      <div id="item_time">
        {{it.created_at}}
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
export default {
  name: 'minecriteria',
  data() {
    return {
      value1: false,
      list: [],
      title: '',
      poster: '',
      rating: null,
      introduction: '',
      message_id: '',
      loadingData: true,
      username: sessionStorage.getItem("username")
    }
  },
  created() {
    //获取用户发表文章
    this.getusercriteria()
  },
  methods: {
    goBackTo() {
      this.$router.go(-1)
    },
    showDetail(_id) {
      this.$router.push(`/item/${_id}`)
    },
    //发送请求获得用户发送过的评论
    getusercriteria() {
      let ps = encodeURI(this.username)
      axios.get(`/api/usercritiques/${ps}`)
        .then(
        res => {
          this.list = res.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 删除detail
    deleteDetail(_id) {
      axios.delete(`/api/critiques/${_id}`)
        .then(res => {
          this.getusercriteria();
          console.log("删除成功！");
        })
        .catch(err => console.log(err))
    }




  }
}

</script>


<style>
#minecriteria {
  margin-top: 50px;
}
#cell_2 {
  margin-right: auto;
  margin-left: auto;
  font-size: 14px;
  width: 90%;
  height: 40%;
  border-radius: 20px 20px;
  background-color: transparent !important;
  color: rgba(255, 255, 255, 1) !important;
  background-color: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid black !important;
}

#Boss_Detail_name {
  color: gray;
  font-size: 14px;
  text-align: left;
  margin-bottom: 30px;
}

#item_poster {
  color: rgba(0, 0, 0, 0.7);
  margin-top: 10px;
  text-align: right;
  font-size: 13px;
}

#item_time {
  padding-left: 20px;
  margin-top: 10px;
  color: rgba(0, 0, 0, 0.7);
  float: left;
  text-align: left;
  font-size: 13px;
}

.media-1-1 {
  background: linear-gradient(to right, rgba(144, 144, 144, 0.2), rgba(144, 144, 144, 0.7));
  /*background-color: rgba(126, 181, 255, 1);*/
  margin-bottom: 20px;
  border-top-left-radius: 0px;
  border-top-right-radius: 60px;
  border-bottom-right-radius: 60px;
  border-bottom-left-radius: 60px;
  /*border-radius: 0px 60px x;*/
  height: 50px;
  /*border: 1px solid rgba(168, 40, 53, 1);*/
  padding-left: 10px;
  padding-right: 20px;
  padding-top: 12px;
}
.passage_name {
  color: gray;
  font-size: 20px;
  text-align: left;
  margin-bottom: 30px;
}
</style>